<template>
    <div>
        <hd-tab :tabs="tabs"></hd-tab>
        <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
                <span>设置管理员角色</span>
            </div>
            <hd-alert :alert="{type:'success'}">您正在为【{{ admin.name }}】设置角色</hd-alert>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="角色选择">
                    <el-checkbox-group v-model="form.currentRoles">
                        <el-checkbox v-for="(role,index) in roles" :key="index" :label="role.name">
                            {{ role.title }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>

            <el-button class="mt-3" type="primary" @click="onSubmit">保存</el-button>
        </el-card>
    </div>
</template>

<script>
import tabs from './tabs'

export default {
    props: ['id'],
    route: {path: 'role/user/:id/selectroles'},
    data() {
        return {
            tabs,
            roles: [],
            form: {currentRoles: []},
            admin: {}
        }
    },
    async created() {
        this.admin = await this.axios.get(`user/${this.$route.params.id}`)
        this.roles = await this.axios.get('admin/role')
        this.form.currentRoles = await this.axios.post(`admin/user/${this.admin.id}/hasRoles`)
    },
    methods: {
        onSubmit() {
            this.axios.post(`admin/user/${this.admin.id}/syncRoles`, this.form)
            this.$router.push({name: 'admin.role.syncroles'})

        }
    }
}
</script>

<style scoped>

</style>
